<template>
    <el-dropdown trigger="click">
        <span class="dropdown-btn" title="操作">
            <i class="el-icon-switch-button"></i> 
            {{user && user.username}}
        </span>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
                <FontIcon icon-name="el-icon-switch-button" />
                <span @click="loginOut">退出</span>
            </el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
</template>

<script>
import { mapState } from 'vuex';

export default {
    computed: {
        ...mapState({
            user: state => state.auth.user,
        })
    },
    methods: {
        loginOut() {
            this.$store.dispatch('resetAuthState', null).then(() => {
                this.$router.push('/login')
            });
        }
    },
}
</script>

<style>

</style>